JavaScript 的 物件 ( Object ) 亂塞一通的學校置物櫃


如果說陣列是適合放同類型東西的小櫃子,如屬性相似、有順序性的資料,那我覺得物件(Object)就像是可以塞很多東西的學校置物櫃(別問我,為什麼我的學校置物櫃亂七八糟的)。

物件( Object )本身是由 {名稱 (key) / 值 (value)}所組成

1.名稱(key)避免使用數字開頭帶有空格的字串帶有特殊字元
2.值(value)可以是任何東西,如:純值函式陣列物件等。


物件宣告

聽說有兩種宣告方式:

Object Constructor (物件建構式)
var MyObject = new Object(); 用 new 關鍵字加上 Object()來宣告一個物件,但似乎不太常用。

Object Literal (物件實字)
var MyObject = {}; 比較常用的語法,也就是用 {} 來宣告一個物件。


物件的使用

看到大家的筆記幾乎都是聯絡人,或學校學生資料,但我決定要用不一樣的,我要用我沒有的東西,所以我要用物件做一份 男友清單 沒錯,我就是這麼不營養。

var Vergil = {
    name:'Vergil',
    height:190,
    face:'handsome',
    Personality:'cold',
    family:{
        name:Dante,
        height:187,
        face:'handsome'
    }
    score:80
}
console.log(Vergil);                           //印出這個男生的資料

>{name: "Vergil", height: 190, face: "handsome", Personality: "cold", family: Object, score: 80}

console.log(Vergil.height);                   //一般表達方式
>190

console.log(Vergil['height']);               //如同陣列般的表達方式,裡面可以放變數喔!
>190

console.log(Vergil.family.name);             //物件裡面的物件,可以這樣取資料
>Dante

假設有一天,我腳踏多條船了( 哪泥! ),那男友清單的管理該怎毛辦?沒關係,我們來使用看看陣列,看能不能幫我管理多筆男友清單的資料。

var BoyfriendList = [];
var Vergil = {
    Name:'Vergil',
    height:190,
    face:'handsome',
    Personality:'cold'
}

var Zack = {
    Name:'Zack',
    height:185,
    face:'handsome',
    Personality:'Nice'
}

var Cloud = {
    Name:'Cloud',
    height:180,
    face:'soso',
    Personality:'blue'
}
BoyfriendList.push(Vergil,Zack,Cloud)

console.log(BoyfriendList[0])
>{ Name: "Vergil", height: 190, face: "handsome", Personality: "cold" }

參考資料:
Lidemy 鋰學院-Huli老師的課程
鐵人賽:JavaScript 就是一堆物件的概念
JavaScript Object (物件)
你懂 JavaScript 嗎?#17 物件(Object)
JavaScript —陣列 Array 與 物件 object

#object #物件







你可能感興趣的文章

Secure Apache Using Certbot with Let's Encrypt on Ubuntu 20.04

Secure Apache Using Certbot with Let's Encrypt on Ubuntu 20.04

ASP.NET Core MVC 之語系切換

ASP.NET Core MVC 之語系切換

Vue起手式

Vue起手式






留言討論